<template>
    <view class="user-profile p-t-10">
        <view class="content">
            <view class="bg-white">
                <view class="user-avatar-box flex-col col-center">
                    <button
                        class="column column-center"
                        hover-class="none"
                        open-type="chooseAvatar"
                        @chooseavatar="onChooseAvatar"
                        @click="onChooseAvatar"
                    >
                        <image
                            class="user-avatar"
                            :src="
                                userInfo.avatar1 != ''
                                    ? userInfo.avatar
                                    : '/static/images/portrait_empty.png'
                            "
                        >
                        </image>
                        <view class="muted xs">点击修改头像</view>
                    </button>
                </view>
                <view class="row-info flex bdb-line">
                    <view class="label md">ID</view>
                    <view class="md flex-1">{{ userInfo.sn }}</view>
                </view>
                <view class="row-info flex bdb-line" @tap="changeName">
                    <view class="label md">昵称</view>
                    <view class="md flex-1">{{ userInfo.nickname }}</view>
                    <u-icon name="arrow-right" />
                </view>
                <view class="row-info flex bdb-line" @tap="changeSex">
                    <view class="label md">性别</view>
                    <view class="md flex-1" :class="userInfo.sex == 0 ? 'muted' : ''">{{
                        userInfo.sex
                    }}</view>
                    <u-icon name="arrow-right" />
                </view>
                <view class="row-info flex bdb-line">
                    <view class="label md">手机号</view>
                    <view class="md flex-1" :class="{ muted: !userInfo.mobile }">{{
                        userInfo.mobile ? userInfo.mobile : '未绑定'
                    }}</view>
                    <!-- #ifdef H5 || APP-PLUS -->
                    <view class="bd-btn br60 flex row-center" @tap="showModifyMobile">{{
                        userInfo.mobile ? '更换手机号' : '绑定手机号'
                    }}</view>
                    <!-- #endif -->
                    <!-- #ifdef MP-WEIXIN -->
                    <button
                        class="bd-btn br60 flex row-center"
                        size="sm"
                        open-type="getPhoneNumber"
                        @getphonenumber="getPhoneNumber"
                    >
                        {{ userInfo.mobile ? '更换手机号' : '绑定手机号' }}
                    </button>
                    <!-- #endif -->
                </view>
                <view class="row-info flex bdb-line">
                    <view class="label md">注册时间</view>
                    <view class="md flex-1">{{ userInfo.create_time }}</view>
                </view>
                <!-- #ifndef MP-WEIXIN-->
                <!-- <view class="row-info flex row-between bdb-line" @tap="showPwdPop">
                    <view class="label md">登录密码</view>
                    <view class="flex">
                        <view class="muted">点击设置</view>
                        <u-icon name="arrow-right" />
                    </view>
                </view> -->
                <!-- #endif -->
                <!-- <view class="row-info flex row-between bdb-line mt10" @tap="goToExplain(0)">
                    <view class="label md">服务协议</view>
                    <u-icon name="arrow-right" />
                </view>
                <view class="row-info flex row-between bdb-line" @tap="goToExplain(1)">
                    <view class="label md">隐私政策</view>
                    <u-icon name="arrow-right" />
                </view> -->
                <!-- #ifdef H5-->
                <!-- <view
                    class="row-info flex row-between bdb-line"
                    @tap="bindWeixin"
                    v-if="!userInfo.oa_auth"
                >
                    <view class="label md">微信授权 </view>
                    <u-icon name="arrow-right" />
                </view> -->
                <!-- #endif -->
                <!-- <view class="row-info flex row-between bdb-line" @tap="goToCancel">
                    <view class="label md">注销账号</view>
                    <u-icon name="arrow-right" />
                </view> -->
                <!-- <view class="row-info flex row-between bdb-line" @tap="goLicense()">
                    <view class="label md">资质信息</view>
                    <u-icon name="arrow-right" />
                </view> -->
                <!-- <view class="row-info flex row-between">
                    <view class="label md">关于我们</view>
                    <view>v{{ version }}</view>
                </view> -->
            </view>
        </view>

        <!-- #ifndef MP-WEIXIN -->
        <u-popup type="center" closeable v-model="showMobile" mode="center" border-radius="14">
            <view class="modify-container bg-white" v-show="showMobile">
                <view class="title xl text-center">{{
                    userInfo.mobile ? '更换手机号' : '绑定手机号'
                }}</view>
                <u-field
                    label="+86"
                    v-if="userInfo.mobile"
                    label-width="100"
                    disabled
                    v-model="userInfo.mobile"
                ></u-field>
                <u-field
                    label="+86"
                    v-else
                    label-width="140"
                    v-model="new_mobile"
                    placeholder="请输入手机号"
                ></u-field>
                <u-field
                    v-model="mobileCode"
                    label="验证码"
                    label-width="140"
                    placeholder="请输入验证码"
                >
                    <view
                        slot="right"
                        class="primary send-code-btn br60 flex row-center"
                        @tap="sendSmsFun"
                    >
                        <u-verification-code
                            :keep-running="true"
                            unique-key="mobile"
                            ref="uCode"
                            @change="codeChange"
                        ></u-verification-code>
                        <view class="sm">{{ codeTips }}</view>
                    </view>
                </u-field>
                <u-field
                    label="新手机号"
                    v-if="userInfo.mobile"
                    label-width="140"
                    placeholder="请输入新的手机号码"
                    v-model="new_mobile"
                ></u-field>
                <view class="primary m-t-10 xs"
                    >{{
                        userInfo.mobile ? '更改' : '绑定'
                    }}手机号码成功后，您的账号将会变更为该设置号码</view
                >
                <view class="btn bg-primary white flex row-center" @tap="changeUserMobileFun"
                    >确定</view
                >
            </view>
        </u-popup>
        <!-- #endif -->
        <u-popup
            v-model="showNickName"
            :closeable="true"
            :maskCloseAble="false"
            mode="center"
            border-radius="14"
        >
            <view class="modify-container bg-white" style="width: 70vw; padding: 24rpx">
                <view class="title xl text-center">修改用户名</view>
                <form @submit="changeNameConfirm">
                    <u-form-item label="新昵称" :labelWidth="120">
                        <input
                            style="height: 60rpx"
                            class="nr"
                            :value="userInfo.nickname"
                            name="nickname"
                            type="nickname"
                            placeholder="请输入新的昵称"
                        />
                    </u-form-item>
                    <button class="btn bg-primary white flex row-center" form-type="submit">
                        确定
                    </button>
                </form>
            </view>
        </u-popup>
        <!-- #ifndef MP-WEIXIN -->
        <u-popup v-model="showPwd" closeable mode="center" border-radius="14">
            <view class="modify-container bg-white">
                <view class="title xl text-center">设置密码</view>
                <u-field label="+86" disabled label-width="100" v-model="userInfo.mobile"></u-field>
                <u-field
                    v-model="pwdCode"
                    label="验证码"
                    label-width="140"
                    placeholder="请输入验证码"
                >
                    <view
                        slot="right"
                        class="primary send-code-btn br60 flex row-center"
                        @tap="sendSmsFun"
                    >
                        <u-verification-code
                            unique-key="password"
                            :keep-running="true"
                            ref="uCode"
                            @change="codeChange"
                        ></u-verification-code>
                        <view class="sm">{{ codeTips }}</view>
                    </view>
                </u-field>
                <u-field
                    label="设置密码"
                    label-width="140"
                    type="password"
                    placeholder="请输入新密码"
                    v-model="pwd"
                ></u-field>
                <u-field
                    label="确认密码"
                    label-width="140"
                    type="password"
                    placeholder="再次输入新密码确认"
                    v-model="comfirmPwd"
                ></u-field>
                <view class="btn bg-primary white flex row-center" @tap="forgetPwdFun">确定</view>
            </view>
        </u-popup>
        <!-- #endif -->
        <u-picker
            mode="selector"
            v-model="showPicker"
            :default-selector="[0]"
            :range="sexList"
            @confirm="onConfirm"
        />
    </view>
</template>

<script>
import {
    userLogout,
    getUserInfo,
    getWxMnpMobile,
    setUserInfo,
    setWechatInfo,
    changeUserMobile,
    apibindOa
} from '@/api/user'
import { baseURL, version } from '@/config/app'
import { sendSms, forgetPwd } from '@/api/app'
import { SMSType } from '@/utils/type'
import { mapGetters } from 'vuex'
import { uploadFile, isWeixinClient, trottle } from '@/utils/tools'
import { getWxCode, getUserProfile } from '@/utils/login'
import wechath5 from '@/utils/wechath5'

const FieldType = {
    NONE: '',
    SEX: 'sex',
    NICKNAME: 'nickname',
    AVATAR: 'avatar',
    MOBILE: 'mobile'
}
export default {
    name: 'userProfile',
    data() {
        return {
            action: baseURL + '/api/file/formimage',
            fileList: [],
            userInfo: {},
            new_mobile: '',
            pwdCode: '',
            mobileCode: '',
            newNickname: '',
            sexList: ['男', '女'],
            fieldType: FieldType.NONE,
            showPicker: false,
            showMobile: false,
            showPwd: false,
            showNickName: false,
            codeTips: '',
            canSendSms: true,
            pwd: '',
            comfirmPwd: '',
            smsType: '',
            code: '',
            version
        }
    },
    methods: {
        codeChange(text) {
            this.codeTips = text
        },
        onSuccess(e) {
            console.log(e)
        },
        uploadImage(path) {
            uni.showLoading({
                title: '正在上传中...',
                mask: true
            })
            uploadFile(path)
                .then((res) => {
                    uni.hideLoading()
                    this.setUserInfoFun(res.uri)
                })
                .catch(() => {
                    uni.hideLoading()
                    this.$toast({
                        title: '上传失败'
                    })
                })
        },
        bindWeixin() {
            this.oaAuth()
        },
        oaAuth() {
            wechath5.getWxUrl()
        },
        onChooseAvatar(e) {
            this.fieldType = FieldType.AVATAR
            // #ifndef MP-WEIXIN
            // 此为uView的跳转方法，详见"文档-JS"部分，也可以用uni的uni.navigateTo
            uni.$u.route({
                // 关于此路径，请见下方"注意事项"
                url: '/components/uview-ui/components/u-avatar-cropper/u-avatar-cropper',
                // 内部已设置以下默认参数值，可不传这些参数
                params: {
                    // 输出图片宽度，高等于宽，单位px
                    destWidth: 300,
                    // 裁剪框宽度，高等于宽，单位px
                    rectWidth: 200,
                    // 输出的图片类型，如果'png'类型发现裁剪的图片太大，改成"jpg"即可
                    fileType: 'jpg'
                }
            })
            // #endif
            // #ifdef MP-WEIXIN
            if (e.detail.avatarUrl) {
                this.uploadImage(e.detail.avatarUrl)
            }
            // #endif
        },
        // 修改用户昵称
        async changeNameConfirm(e) {
            this.fieldType = FieldType.NICKNAME
            this.newNickname = e.detail.value.nickname
            if (!this.newNickname)
                return this.$toast({
                    title: '请输入新的昵称'
                })
            await this.setUserInfoFun(this.newNickname)
            this.showNickName = false
        },
        // 更新小程序头像信息
        async getUserProfileFun() {
            const { userInfo } = await getUserProfile()
            const { avatarUrl, nickName, gender } = userInfo
            const { msg, code } = await setWechatInfo({
                nickname: nickName,
                avatar: avatarUrl,
                sex: gender
            })
            if (code == 1) {
                this.$toast({
                    title: msg
                })
                this.getUserInfoFun()
            }
        },

        // end
        async logout() {
            const [req, res] = await uni.showModal({
                title: '提示',
                content: '是否退出登录？'
            })
            if (!res.confirm) return
            //  退出登录
            userLogout().then((res) => {
                if (res.code == 1) {
                    this.$store.commit('logout')
                    this.$toast({
                        title: '退出成功'
                    })
                    setTimeout(() => {
                        this.$Router.replaceAll('/pages/login/login')
                    }, 500)
                }
            })
        },
        goToExplain(value) {
            this.$Router.push({
                path: '/bundle/pages/server_explan/server_explan',
                query: {
                    type: value
                }
            })
        },
        goLicense() {
            this.$Router.push({
                path: '/bundle/pages/license/license',
                query: {
                    id: ''
                }
            })
        },
        goToCancel() {
            this.$Router.push({
                path: '/bundle/pages/cancel/cancel',
                query: {
                    id: ''
                }
            })
        },
        // 发送短信
        sendSmsFun(type) {
            if (!this.$refs.uCode.canGetCode) return
            sendSms({
                mobile: this.userInfo.mobile || this.new_mobile,
                key: this.smsType
            }).then((res) => {
                if (res.code == 1) {
                    this.$toast({
                        title: res.msg
                    })
                    this.$refs.uCode.start()
                }
            })
        },
        getUserInfoFun() {
            getUserInfo().then((res) => {
                if (res.code == 1) {
                    this.userInfo = res.data
                }
            })
        },
        // 更换手机号
        showModifyMobile() {
            this.new_mobile = ''
            this.showMobile = true
            this.smsType = this.userInfo.mobile ? SMSType.CHANGE_MOBILE : SMSType.BIND
        },
        changeUserMobileFun() {
            if (!this.mobileCode) {
                this.$toast({
                    title: '请输入验证码'
                })
                return
            }
            if (!this.new_mobile) {
                this.$toast({
                    title: '请输入新的手机号码'
                })
                return
            }

            changeUserMobile({
                mobile: this.userInfo.mobile,
                new_mobile: this.new_mobile,
                code: this.mobileCode,
                action: this.userInfo.mobile ? 'change' : 'binding'
            }).then((res) => {
                if (res.code == 1) {
                    this.showMobile = false
                    this.$toast({
                        title: res.msg
                    })
                    this.getUserInfoFun()
                }
            })
        },
        // 修改用户信息
        async setUserInfoFun(value) {
            const res = await setUserInfo({
                field: this.fieldType,
                value: value
            })
            if (res.code == 1) {
                this.$toast({
                    title: res.msg
                })
                this.getUserInfoFun()
            }
        },
        onConfirm(value) {
            this.setUserInfoFun(value[0] + 1)
            this.showPicker = false
        },
        changeSex(e) {
            this.showPicker = true
            this.fieldType = FieldType.SEX
        },

        // 修改密码
        showPwdPop() {
            if (!this.userInfo.mobile) {
                this.$toast({
                    title: '请绑定手机后再设置密码'
                })
                return
            }
            this.smsType = SMSType.FINDPWD
            this.showPwd = true
        },
        forgetPwdFun() {
            let { pwdCode, pwd, comfirmPwd } = this
            if (!pwdCode) {
                this.$toast({
                    title: '请输入短信验证码'
                })
                return
            }
            if (!pwd) {
                this.$toast({
                    title: '请输入新密码'
                })
                return
            }
            if (!comfirmPwd) {
                this.$toast({
                    title: '再次输入新密码确认'
                })
                return
            }
            if (pwd != comfirmPwd) {
                this.$toast({
                    title: '两次密码输入不一致'
                })
                return
            }
            let data = {
                mobile: this.userInfo.mobile,
                code: pwdCode,
                password: pwd,
                repassword: comfirmPwd
            }
            forgetPwd(data).then((res) => {
                if (res.code == 1) {
                    this.showPwd = false
                    this.$toast({
                        title: '设置密码成功'
                    })
                    this.getUserInfoFun()
                }
            })
        },
        // 修改昵称
        changeName() {
            this.fieldType = FieldType.NICKNAME
            this.newNickname = ''
            this.showNickName = true
        },
        // 微信获取手机号
        // #ifdef MP-WEIXIN
        async getPhoneNumber(e) {
            console.log(e, this.code)
            const { encryptedData, iv } = e.detail
            const params = {
                code: this.code,
                encrypted_data: encryptedData,
                iv
            }
            this.fieldType = FieldType.MOBILE
            if (encryptedData) {
                const { data, code, msg } = await getWxMnpMobile(params)
                // if (code == 1) {
                //     this.$toast({
                //         title: msg
                // })
                // #ifdef MP-WEIXIN
                // getWxCode().then((res) => {
                //     this.code = res
                // })
                // #endif
                // this.getUserInfoFun()
                // }
                getWxCode().then((res) => {
                    this.code = res
                })
                this.getUserInfoFun()
            }
        }
        // #endif
    },

    async onLoad() {
        this.getUserInfoFun()
        // #ifdef MP-WEIXIN
        getWxCode().then((res) => {
            this.code = res
        })
        // #endif
        // #ifdef H5
        let { code, form } = this.$Route.query
        if (code) {
            if (Array.isArray(code)) code = code.pop()

            await apibindOa({
                code
            })
        }
        // #endif
        uni.$on('uAvatarCropper', (path) => {
            console.log(path)
            this.uploadImage(path)
        })
        this.getUserProfileFun = trottle(this.getUserProfileFun, 500, this)
    },
    onUnload() {
        uni.$off('uAvatarCropper')
    },
    computed: {
        ...mapGetters(['token', 'appConfig'])
    }
}
</script>

<style lang="scss">
.user-profile {
    min-height: calc(100vh - env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
    background-color: #f5f7fa;
    
    .content {
        margin: 20rpx 30rpx;
        overflow: hidden;
        background-color: #ffffff;
        border-radius: 16rpx;
        box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.06);

        .user-avatar-box {
            padding: 50rpx 40rpx 60rpx;
            background-color: #ffffff;
            display: flex;
            flex-direction: column;
            align-items: center;
            border-bottom: 1rpx solid rgba(0, 0, 0, 0.05);

            .user-avatar {
                width: 160rpx;
                height: 160rpx;
                border-radius: 50%;
                border: 4rpx solid #ffffff;
                box-shadow: 0 6rpx 12rpx rgba(0, 0, 0, 0.1);
            }
        }

        .row-info {
            padding: 32rpx 40rpx;
            position: relative;
            display: flex;
            align-items: center;
            
            &:active {
                background-color: #fafafa;
            }

            .label {
                width: 160rpx;
                color: #333333;
                font-size: 28rpx;
                font-weight: 500;
            }

            .bd-btn {
                padding: 10rpx 24rpx;
                border: 1rpx solid $-color-primary;
                border-radius: 24rpx;
                color: $-color-primary;
                font-size: 28rpx;
            }
        }

        .bdb-line {
            border-bottom: 1rpx solid #f0f0f0;
            margin: 0 30rpx;
        }
    }
    
    .save-btn {
        margin: 40rpx 30rpx;
        height: 90rpx;
        color: #ff3b30;
        border-radius: 12rpx;
        border: none;
        background-color: #ffffff;
        font-size: 30rpx;
        box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.06);
    }
    
    .modify-container {
        padding: 40rpx;
        width: 620rpx;
        border-radius: 16rpx;
        background-color: #ffffff;
        box-shadow: 0 10rpx 25rpx rgba(0, 0, 0, 0.1);

        .title {
            padding: 20rpx 0rpx 30rpx;
            font-weight: 500;
            color: #333333;
            font-size: 32rpx;
            text-align: center;
            border-bottom: 1rpx solid #f0f0f0;
            margin-bottom: 20rpx;
        }

        .btn {
            height: 90rpx;
            border-radius: 12rpx;
            margin: 60rpx 30rpx 0;
            font-size: 30rpx;
            background-color: $-color-primary;
            box-shadow: 0 6rpx 12rpx rgba($-color-primary, 0.2);
        }
    }
}
</style>
